<template>
	<view class="container">
		<view class="user-header">
			<!-- 已登录状态 -->
			<view class="logged-in-section" v-if="isLogin">
				<view class="user-avatar-section">
					<image class="user-avatar" :src="userData.avatar" mode="aspectFill"></image>
					<view class="user-info">
						<text class="user-nickname">{{ userData.username }}</text>
						<text class="user-id">ID: {{ userData.id || '000000' }}</text>
						<text class="user-phone" v-if="userData.phone">手机号：{{ userData.phone }}</text>
					</view>
				</view>
				<view class="settings-btn" @click="goToSettings" v-if="false">
					<svg-icon name="settings-alt" size="28" />
				</view>
			</view>

			<!-- 未登录状态 -->
			<view class="not-logged-section" v-else @click="handleWechatLogin">
				<view class="login-prompt">
					<image class="default-avatar" src="/static/images/user.svg" mode="aspectFill"></image>
					<view class="login-info">
						<text class="login-title">去登录</text>
						<text class="login-subtitle">点击去登录，享受更多服务</text>
					</view>
				</view>
			</view>
		</view>

		<view class="menu-section">
			<!-- 预约管理 -->
			<view class="menu-group">
				<view class="group-title">
					<text class="title-text">预约管理</text>
				</view>
				<view class="menu-list">
					<view class="menu-item" @click="goToAppointment(0)">
						<view class="menu-left">
							<svg-icon name="clipboard" size="32" />
							<text class="menu-text">全部预约</text>
						</view>
						<view class="menu-right">
							<!-- <text class="menu-badge" v-if="orderCounts.all > 0">{{ orderCounts.all }}</text> -->
							<uni-icons type="right" color="#4CAF50" size="18"></uni-icons>
						</view>
					</view>
					<view class="menu-item" @click="goToAppointment(1)">
						<view class="menu-left">
							<svg-icon name="clipboard" size="32" />
							<text class="menu-text">待使用</text>
						</view>
						<view class="menu-right">
							<text class="menu-badge" v-if="orderCounts.pending > 0">{{ orderCounts.pending }}</text>
							<uni-icons type="right" color="#4CAF50" size="18"></uni-icons>
						</view>
					</view>

					<view class="menu-item" @click="goToAppointment(2)">
						<view class="menu-left">
							<svg-icon name="cancel-circle" size="32" />
							<text class="menu-text">已取消</text>
						</view>
						<view class="menu-right">
							<!-- <text class="menu-badge" v-if="orderCounts.cancel > 0">{{ orderCounts.cancel }}</text> -->
							<uni-icons type="right" color="#4CAF50" size="18"></uni-icons>
						</view>
					</view>
					<view class="menu-item" @click="goToAppointment(3)">
						<view class="menu-left">
							<svg-icon name="celebration" size="32" />
							<text class="menu-text">已完成</text>
						</view>
						<view class="menu-right">
							<!-- <text class="menu-badge" v-if="orderCounts.completed > 0">{{ orderCounts.completed }}</text> -->
							<uni-icons type="right" color="#4CAF50" size="18"></uni-icons>
						</view>
					</view>
				</view>
			</view>

			<!-- 订单管理 -->
			<view class="menu-group">
				<view class="group-title">
					<text class="title-text">订单管理</text>
				</view>
				<view class="menu-list">
					<view class="menu-item" @click="goToOrders(0)">
						<view class="menu-left">
							<svg-icon name="clipboard" size="32" />
							<text class="menu-text">全部订单</text>
						</view>
						<view class="menu-right">
							<!-- <text class="menu-badge" v-if="orderCounts.all > 0">{{ orderCounts.all }}</text> -->
							<uni-icons type="right" color="#4CAF50" size="18"></uni-icons>
						</view>
					</view>
					<view class="menu-item" @click="goToOrders(1)">
						<view class="menu-left">
							<svg-icon name="clipboard" size="32" />
							<text class="menu-text">待付款</text>
						</view>
						<view class="menu-right">
							<text class="menu-badge" v-if="orderCounts.pending > 0">{{ orderCounts.pending }}</text>
							<uni-icons type="right" color="#4CAF50" size="18"></uni-icons>
						</view>
					</view>

					<view class="menu-item" @click="goToOrders(2)">
						<view class="menu-left">
							<svg-icon name="cancel-circle" size="32" />
							<text class="menu-text">待发货</text>
						</view>
						<view class="menu-right">
							<!-- <text class="menu-badge" v-if="orderCounts.cancel > 0">{{ orderCounts.cancel }}</text> -->
							<uni-icons type="right" color="#4CAF50" size="18"></uni-icons>
						</view>
					</view>
					<view class="menu-item" @click="goToOrders(3)">
						<view class="menu-left">
							<svg-icon name="celebration" size="32" />
							<text class="menu-text">待收货</text>
						</view>
						<view class="menu-right">
							<!-- <text class="menu-badge" v-if="orderCounts.completed > 0">{{ orderCounts.completed }}</text> -->
							<uni-icons type="right" color="#4CAF50" size="18"></uni-icons>
						</view>
					</view>
					<view class="menu-item" @click="goToOrders(4)">
						<view class="menu-left">
							<svg-icon name="celebration" size="32" />
							<text class="menu-text">已完成</text>
						</view>
						<view class="menu-right">
							<!-- <text class="menu-badge" v-if="orderCounts.completed > 0">{{ orderCounts.completed }}</text> -->
							<uni-icons type="right" color="#4CAF50" size="18"></uni-icons>
						</view>
					</view>
					<view class="menu-item" @click="goToOrders(5)">
						<view class="menu-left">
							<svg-icon name="cancel-circle" size="32" />
							<text class="menu-text">已取消</text>
						</view>
						<view class="menu-right">
							<!-- <text class="menu-badge" v-if="orderCounts.completed > 0">{{ orderCounts.completed }}</text> -->
							<uni-icons type="right" color="#4CAF50" size="18"></uni-icons>
						</view>
					</view>
				</view>
			</view>

			<!-- 成员管理 -->
			<view class="menu-group">
				<view class="group-title">
					<text class="title-text">成员管理</text>
				</view>
				<view class="menu-list">
					<view class="menu-item" @click="goToVisitors">
						<view class="menu-left">
							<svg-icon name="group" size="32" />
							<text class="menu-text">成员管理</text>
						</view>
						<view class="menu-right">
							<uni-icons type="right" color="#4CAF50" size="18"></uni-icons>
						</view>
					</view>
					<view class="menu-item" @click="addNewVisitor">
						<view class="menu-left">
							<svg-icon name="person-add" size="32" />
							<text class="menu-text">添加成员</text>
						</view>
						<view class="menu-right">
							<uni-icons type="right" color="#4CAF50" size="18"></uni-icons>
						</view>
					</view>
				</view>
			</view>

			<!-- 其他功能 -->
			<view class="menu-group">
				<view class="group-title">
					<text class="title-text">其他功能</text>
				</view>
				<view class="menu-list">
					<view class="menu-item" @click="goToAddress">
						<view class="menu-left">
							<svg-icon name="location" size="32" />
							<text class="menu-text">地址管理</text>
						</view>
						<view class="menu-right">
							<uni-icons type="right" color="#4CAF50" size="18"></uni-icons>
						</view>
					</view>
					<view class="menu-item" @click="goToHelp">
						<view class="menu-left">
							<svg-icon name="help-center" size="32" />
							<text class="menu-text">帮助中心</text>
						</view>
						<view class="menu-right">
							<uni-icons type="right" color="#4CAF50" size="18"></uni-icons>
						</view>
					</view>
					<view class="menu-item" @click="goToAbout">
						<view class="menu-left">
							<svg-icon name="info" size="32" />
							<text class="menu-text">关于我们</text>
						</view>
						<view class="menu-right">
							<uni-icons type="right" color="#4CAF50" size="18"></uni-icons>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 退出登录按钮（仅登录状态显示） -->
		<view class="logout-section" v-if="isLogin">
			<button class="logout-btn" @click="handleLogout">
				<text class="logout-text">退出登录</text>
			</button>
		</view>
		<!-- 帮助中心底部弹窗 -->
		<view class="modal-overlay" v-if="showHelpModal" @click="closeHelpModal">
			<view class="help-modal" @click.stop>
				<view class="modal-header">
					<text class="modal-title">景区服务热线</text>
					<view class="close-btn" @click="closeHelpModal">
						<uni-icons type="close" size="24" color="#666"></uni-icons>
					</view>
				</view>
				<view class="modal-content">
					<view class="service-info">
						<view class="info-item">
							<view class="info-label">
								<uni-icons type="notification-filled" size="16" color="#4CAF50"></uni-icons>
								<text class="label-text">服务时间</text>
							</view>
							<text class="info-value">09:00 - 18:00</text>
						</view>
						<view class="info-item">
							<view class="info-label">
								<uni-icons type="phone-filled" size="16" color="#4CAF50"></uni-icons>
								<text class="label-text">客服热线</text>
							</view>
							<text class="info-value">028-12345678</text>
						</view>
						<view class="info-item">
							<view class="info-label">
								<uni-icons type="email-filled" size="16" color="#4CAF50"></uni-icons>
								<text class="label-text">邮箱咨询</text>
							</view>
							<text class="info-value">service@waing.com</text>
						</view>
					</view>
					<view class="action-buttons">
						<button class="action-btn primary" @click="makePhoneCall">
							<uni-icons type="phone" size="20" color="#fff"></uni-icons>
							<text class="btn-text">拨打电话</text>
						</button>
						<button class="action-btn secondary" @click="copyPhoneNumber">
							<uni-icons type="copy" size="20" color="#4CAF50"></uni-icons>
							<text class="btn-text">复制号码</text>
						</button>
					</view>
				</view>
			</view>
		</view>

		<!-- 自定义底部导航栏 -->
		<bottom-navbar :current="2" @change="handleTabChange"></bottom-navbar>
	</view>
</template>

<script setup>
import { ref, reactive, onMounted, computed, nextTick, toRefs } from 'vue';
import { onLoad, onShow, onShareAppMessage } from '@dcloudio/uni-app';
import api from '@/api/index.js';
import config from '@/config/index.js';
import common from '@/utils/common.js';

import useUserInfoStore from '@/stores/user.js';
import { storeToRefs } from 'pinia';
import useSelectStore from '@/stores/select.js';
import SvgIcon from '@/components/svg-icon/svg-icon.vue';

const userStore = useUserInfoStore();
const selectStore = useSelectStore();
const { selectedVisitors } = storeToRefs(selectStore);
const { page_url, userData, login_code, isLogin } = storeToRefs(userStore);

// 订单数量统计（模拟数据）
const orderCounts = ref({
	all: 0, // 全部订单
	pending: 0, // 待使用
	cancel: 0, // 已取消
	completed: 0 // 已完成
});

// 帮助中心弹窗状态
const showHelpModal = ref(false);

const code = ref('');
onLoad((option) => {
	// 获取当前 URL
	const urlParams = new URLSearchParams(window.location.search);
	const code = urlParams.get('code');
	const state = urlParams.get('state');

	console.log('code:', code);
	console.log('state:', state);

	if (code && code != login_code.value) {
		login_code.value = code;
		wxlogin();
	}
});

onMounted(() => {
	// 是否有token
	if (common.getToken()) {
		getUserInfo();
	}
});

const getUserInfo = () => {
	try {
		api.userApi.getUserInfo().then((res) => {
			console.log('获取用户信息', res);
			userData.value = res;
			isLogin.value = true;
		});
	} catch (error) {
		isLogin.value = false;
	}

	api.activistApi.bookingList().then((res) => {
		// 1已预约2已取消3已使用
		orderCounts.value.all = res.length;
		orderCounts.value.pending = res.filter((item) => item.status == 1).length;
		orderCounts.value.cancel = res.filter((item) => item.status == 2).length;
		orderCounts.value.completed = res.filter((item) => item.status == 3).length;
	});
};

// 微信登录
const wxlogin = () => {
	api.userApi.login({ code: login_code.value }).then((res) => {
		console.log('微信登录', res);
		if (res) {
			common.setToken(res);
			isLogin.value = true;
			uni.redirectTo({
				url: page_url.value
			});
			getUserInfo();
		} else {
			isLogin.value = false;
		}
	});
};

// 微信登录
const handleWechatLogin = async () => {
	//#ifdef H5
	common.wechatLogin();
	//#endif

	// #ifdef MP-WEIXIN
	uni.login({
		provider: 'weixin', //使用微信登录
		success: function (res) {
			toLogin({ phone: phone.value, js_code: res.code, type: 2 });
		}
	});
	// #endif
};

// 退出登录
const handleLogout = () => {
	uni.showModal({
		title: '退出登录',
		content: '确定要退出登录吗？',
		confirmText: '确定',
		cancelText: '取消',
		success: (res) => {
			if (res.confirm) {
				common.setToken('');
				isLogin.value = false;
			}
		}
	});
};

// 跳转到预约页面
const goToAppointment = (type) => {
	if (!isLogin.value) {
		showLoginPrompt();
		return;
	}
	uni.navigateTo({
		url: `/pages/details/order?type=${type}`
	});
};
// 跳转到订单页面
const goToOrders = (type) => {
	if (!isLogin.value) {
		showLoginPrompt();
		return;
	}
	uni.navigateTo({
		url: `/pages/commerce/order?type=${type}`
	});
};

// 跳转到成员管理
const goToVisitors = () => {
	if (!isLogin.value) {
		showLoginPrompt();
		return;
	}
	uni.navigateTo({
		url: '/pages/details/visitors'
	});
};

// 添加新成员
const addNewVisitor = () => {
	if (!isLogin.value) {
		showLoginPrompt();
		return;
	}
	uni.navigateTo({
		url: '/pages/details/vitorsAdd'
	});
};

// 跳转到设置
const goToSettings = () => {
	uni.navigateTo({
		url: '/pages/settings/index'
	});
};

// 跳转到地址管理
const goToAddress = () => {
	uni.navigateTo({
		url: '/pages/commerce/address'
	});
};

// 跳转到帮助中心
const goToHelp = () => {
	showHelpModal.value = true;
};

// 关闭帮助弹窗
const closeHelpModal = () => {
	showHelpModal.value = false;
};

// 拨打电话
const makePhoneCall = () => {
	uni.makePhoneCall({
		phoneNumber: '028-12345678',
		success: () => {
			closeHelpModal();
		},
		fail: () => {
			uni.showToast({
				title: '拨号失败',
				icon: 'none'
			});
		}
	});
};

// 复制号码
const copyPhoneNumber = () => {
	uni.setClipboardData({
		data: '028-12345678',
		success: () => {
			uni.showToast({
				title: '号码已复制',
				icon: 'success'
			});
			closeHelpModal();
		},
		fail: () => {
			uni.showToast({
				title: '复制失败',
				icon: 'none'
			});
		}
	});
};

// 跳转到关于我们
const goToAbout = () => {
	uni.showModal({
		title: '关于我们',
		content: '欢迎使用我们的应用！\n\n版本：1.0.0\n\n如有问题请联系客服。',
		showCancel: false,
		confirmText: '知道了'
	});
};

// 显示登录提示
const showLoginPrompt = () => {
	uni.showModal({
		title: '需要登录',
		content: '此功能需要登录后才能使用，是否立即登录？',
		confirmText: '立即登录',
		cancelText: '取消',
		success: (res) => {
			if (res.confirm) {
				handleWechatLogin();
			}
		}
	});
};

// 底部导航栏切换事件
const handleTabChange = ({ item, index }) => {
	console.log('切换到:', item.text, '索引:', index);
};
</script>

<style lang="scss" scoped>
.container {
	width: 100%;
	min-height: 100vh;
	background: linear-gradient(180deg, #56ab2f 0%, #a8e6cf 30%, #f5f5f5 50%, #f5f5f5 100%);
	padding-bottom: 120rpx;
	box-sizing: border-box;
}

.user-header {
	padding: 60rpx 30rpx 40rpx;
	margin-bottom: 20rpx;
}

/* 已登录状态 */
.logged-in-section {
	display: flex;
	justify-content: space-between;
	align-items: center;

	.user-avatar-section {
		display: flex;
		align-items: center;
		flex: 1;

		.user-avatar {
			width: 120rpx;
			height: 120rpx;
			border-radius: 60rpx;
			border: 4rpx solid rgba(255, 255, 255, 0.8);
			margin-right: 25rpx;
		}

		.user-info {
			flex: 1;

			.user-nickname {
				display: block;
				font-size: 36rpx;
				font-weight: bold;
				color: white;
				margin-bottom: 8rpx;
			}

			.user-id {
				display: block;
				font-size: 24rpx;
				color: rgba(255, 255, 255, 0.8);
				margin-bottom: 4rpx;
			}

			.user-phone {
				display: block;
				font-size: 24rpx;
				color: rgba(255, 255, 255, 0.8);
			}
		}
	}

	.settings-btn {
		width: 60rpx;
		height: 60rpx;
		background: rgba(255, 255, 255, 0.2);
		border-radius: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		backdrop-filter: blur(10rpx);

		.settings-icon {
			font-size: 28rpx;
		}
	}
}

/* 未登录状态 */
.not-logged-section {
	display: flex;
	justify-content: space-between;
	align-items: center;

	.login-prompt {
		display: flex;
		align-items: center;
		flex: 1;

		.default-avatar {
			width: 120rpx;
			height: 120rpx;
			border-radius: 60rpx;
			border: 4rpx solid rgba(255, 255, 255, 0.5);
			margin-right: 25rpx;
			opacity: 0.8;
		}

		.login-info {
			flex: 1;

			.login-title {
				display: block;
				font-size: 36rpx;
				font-weight: bold;
				color: white;
				margin-bottom: 8rpx;
			}

			.login-subtitle {
				display: block;
				font-size: 24rpx;
				color: rgba(255, 255, 255, 0.8);
			}
		}
	}
}

.menu-section {
	padding: 0 20rpx;
}

.menu-group {
	background: white;
	border-radius: 16rpx;
	margin-bottom: 20rpx;
	overflow: hidden;
	box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);

	.group-title {
		background: rgba(86, 171, 47, 0.05);
		padding: 20rpx 25rpx;
		border-bottom: 1rpx solid rgba(86, 171, 47, 0.1);

		.title-text {
			font-size: 28rpx;
			font-weight: 600;
			color: #56ab2f;
		}
	}

	.menu-list {
		.menu-item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 25rpx;
			border-bottom: 1rpx solid #f5f5f5;
			transition: background-color 0.3s ease;

			&:last-child {
				border-bottom: none;
			}

			&:active {
				background-color: rgba(86, 171, 47, 0.05);
			}

			.menu-left {
				display: flex;
				align-items: center;
				flex: 1;
				gap: 20rpx;

				.menu-text {
					font-size: 30rpx;
					color: #333;
					font-weight: 500;
				}
			}

			.menu-right {
				display: flex;
				align-items: center;
				gap: 10rpx;

				.menu-badge {
					background: #ff4757;
					color: white;
					font-size: 20rpx;
					padding: 4rpx 8rpx;
					border-radius: 10rpx;
					min-width: 20rpx;
					text-align: center;
					line-height: 1;
				}

				.arrow {
					font-size: 24rpx;
					color: #ccc;
					font-weight: bold;
				}
			}
		}
	}
}

/* 退出登录区域 */
.logout-section {
	padding: 40rpx 20rpx;

	.logout-btn {
		width: 100%;
		height: 88rpx;
		background: linear-gradient(135deg, #ff6b6b, #ff8e8e);
		color: white;
		border: none;
		border-radius: 16rpx;
		font-size: 32rpx;
		font-weight: bold;
		box-shadow: 0 4rpx 15rpx rgba(255, 107, 107, 0.3);

		&::after {
			border: none;
		}

		.logout-text {
			font-size: 32rpx;
		}
	}
}

/* 帮助中心弹窗样式 */
.modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	z-index: 10000;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	animation: fadeIn 0.3s ease;
}

.help-modal {
	width: 100%;
	max-width: 750rpx;
	background: white;
	border-radius: 32rpx 32rpx 0 0;
	box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.1);
	animation: slideUp 0.3s ease;
	overflow: hidden;
}

.modal-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 40rpx 40rpx 20rpx;
	border-bottom: 1rpx solid #f0f0f0;

	.modal-title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
	}

	.close-btn {
		width: 48rpx;
		height: 48rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 24rpx;
		background: #f5f5f5;

		&:active {
			background: #e8e8e8;
		}
	}
}

.modal-content {
	padding: 40rpx;
}

.service-info {
	margin-bottom: 40rpx;

	.info-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 0;
		border-bottom: 1rpx solid #f5f5f5;

		&:last-child {
			border-bottom: none;
		}

		.info-label {
			display: flex;
			align-items: center;
			gap: 8rpx;

			.label-text {
				font-size: 30rpx;
				color: #666;
				font-weight: 500;
			}
		}

		.info-value {
			font-size: 30rpx;
			color: #333;
			font-weight: 600;
		}
	}
}

.action-buttons {
	display: flex;
	gap: 20rpx;

	.action-btn {
		flex: 1;
		height: 88rpx;
		border-radius: 16rpx;
		border: none;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 12rpx;
		font-size: 30rpx;
		font-weight: 600;
		transition: all 0.3s ease;

		&::after {
			border: none;
		}

		&.primary {
			background: linear-gradient(135deg, #4caf50, #66bb6a);
			color: white;
			box-shadow: 0 4rpx 15rpx rgba(76, 175, 80, 0.3);

			&:active {
				transform: translateY(2rpx);
				box-shadow: 0 2rpx 10rpx rgba(76, 175, 80, 0.4);
			}
		}

		&.secondary {
			background: white;
			color: #4caf50;
			border: 2rpx solid #4caf50;

			&:active {
				background: rgba(76, 175, 80, 0.05);
			}
		}

		.btn-text {
			font-size: 30rpx;
		}
	}
}

/* 动画效果 */
@keyframes fadeIn {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes slideUp {
	from {
		transform: translateY(100%);
	}

	to {
		transform: translateY(0);
	}
}
</style>
